<template>
  <home-content title="销量统计">
    <el-tabs v-model="activeName" @tab-click="clickHandle">
      <el-tab-pane class="tabs_item" label="销售量" name="saleNum">
        <chart-area
          v-if="statisticData.agentList.length > 0 && activeName == 'saleNum'"
          :x-data="statisticData.agentList"
          :chart-data="statisticData.saleNumList"
          :timepicker="true"
          :toolbox="true"
          picker-type="week"
          @reset-time="resetTime"
          tipName="销售量"
        ></chart-area>
      </el-tab-pane>
      <el-tab-pane class="tabs_item" label="学生人数" name="userNum">
        <chart-area
          v-if="activeName == 'userNum'"
          :x-data="statisticData.agentList"
          :chart-data="statisticData.userNumList"
          :timepicker="true"
          :toolbox="true"
          picker-type="week"
          @reset-time="resetTime"
          tipName="学生人数"
        ></chart-area>
      </el-tab-pane>
      <el-tab-pane class="tabs_item" label="销售额" name="saleAmount">
        <chart-area
          v-if="activeName == 'saleAmount'"
          :x-data="statisticData.agentList"
          :chart-data="statisticData.saleAmountList"
          :timepicker="true"
          :toolbox="true"
          picker-type="week"
          @reset-time="resetTime"
          tipName="销售额"
        ></chart-area>
      </el-tab-pane>
    </el-tabs>
    <div class="table_container">
      <el-row justify="center">
        <el-col class="table-header" :span="3">排名</el-col>
        <el-col class="table-header" :span="3">热门学科</el-col>
        <el-col class="table-header" :span="3">销量</el-col>
        <el-col class="table-header" :span="3">销量增幅</el-col>
        <el-col class="table-header" :span="3">学生人数</el-col>
        <el-col class="table-header" :span="3">学生人数增幅</el-col>
        <el-col class="table-header" :span="3">销售额</el-col>
        <el-col class="table-header" :span="3">销售额增幅</el-col>
      </el-row>
      <el-row v-for="(item,index) in statisticDataResponse" :key="index">
        <el-col class="table-item" :span="3">{{ index + 1 }}</el-col>
        <el-col class="table-item" :span="3">{{ item.agentName }}</el-col>
        <el-col class="table-item" :span="3">{{ item.saleNum }}</el-col>
        <el-col class="table-item" :span="3">{{ item.salePercent }}</el-col>
        <el-col class="table-item" :span="3">{{ item.userNum }}</el-col>
        <el-col class="table-item" :span="3">{{ item.userPercent }}</el-col>
        <el-col class="table-item" :span="3">{{ item.saleAmount }}</el-col>
        <el-col class="table-item" :span="3">{{ item.amountPercent }}</el-col>
      </el-row>
    </div>
  </home-content>
</template>

<script>
import HomeContent from "@/components/HomeContent.vue";
import ChartArea from "@/components/ChartArea.vue";
import request from "@/utils/request";
import { getStatisticData } from "@/utils/getChartsData";
export default {
  name: "Statistics",
  components: {
    "home-content": HomeContent,
    "chart-area": ChartArea
  },
  data() {
    return {
      activeName: "saleNum",
      statisticData: {
        saleNumList: [],
        userNumList: [],
        saleAmountList: [],
        agentList: []
      },
      date: "",
      statisticDataResponse: [],
      datePickerSel: ""
    };
  },
  created() {
    this.initStatisticData();
  },
  methods: {
    clickHandle() {},
    async initStatisticData(date) {
      this.getPickerSel(date);

      const result = await getStatisticData({
        datePickerSel: this.datePickerSel,
        type: "year/month/week"
      });

      this.statisticDataResponse = result.responseList;
      this.statisticData.saleNumList = result.saleNumList;
      this.statisticData.userNumList = result.userNumList;
      this.statisticData.saleAmountList = result.saleAmountList;
      this.statisticData.agentList = result.xlist;
    },
    getPickerSel(date) {
      if (!date) {
        date = new Date();
      }
      let week = this.$dayjs(date).week();
      let year = this.$dayjs(date).format("YYYY");
      this.datePickerSel = `${year}/${this.$dayjs(date).format(
        "YYYY-MM"
      )}/${year}-${week}`;
    },
    resetTime(date) {
      this.initStatisticData(date);
      console.log(this.datePickerSel);
    }
  }
};
</script>

<style lang="less" scoped>
.table-header {
  font-weight: 600;
  color: #666666ff;
  font-size: 16px;
}
.el-row {
  border-top: 1px solid #eee;
}
.el-col {
  text-align: center;
  background-color: #f2f2f2;
  line-height: 58px;
  border-right: 1px solid #e0e0e0;
  &:nth-child(8) {
    border-right: none;
  }
}
.table-item {
  font-size: 14px;
  background-color: #fff;
}
</style>